import React, { createContext, useState, useRef, useContext } from 'react'
const Son = (props) => {
    /* 默认会获取所有的值 */
    const list = useContext(ct)
    return (
        <ul>
            {
            list.map((item, i) => { return <li key={i} > {item}</li> })
            }     
        </ul>
    )
}
/* 这个上下文,返回是一个对象,Provider 提供数据的 ,consumer消费者 */
const ct = createContext()
// rfce 函數組件
function Test0101() {
    const [list, setList] = useState(['ad', 'ap', 111])
    /* useRef 函数组件来获取dom元素的 */
    const idom = useRef()
    const add = (params) => {
        const ival = idom.current.value;
        list.push(ival)
        // debugger,数组和对象 是传址的,改变里边的数据,ract来说,并不是新额数据
        const nlist = [...list]
        setList(nlist)
    }
    return (
        <div>
            <input type="text" ref={idom} />
            <button onClick={add} >请点击 {list.length}</button>
            <ct.Provider value={list} >
                <Son ></Son>
            </ct.Provider>
        </div>
    )
}
export default Test0101
